<template>
    <div>
        <top-bar></top-bar>
        <div class="content Video-index" :class="{ 'footer-download': this.footer.isDownload, 'footer-default': this.footer.isDefault, 'footer-detail': this.footer.isDetail  }">
            <card
                v-for="(item, index) in list"
                :key="item.id"
                :bg="item.img"
                :data-id="item.id"
                :title="item.title"
                type="video-list-check"
                @click.native="changeSelected($event)"
                ></card>
        </div>
        <mfooter :download="this.download" title="完善个人资料，下载高清视频" :type="this.footer.type" :chooseCount="this.chooseCount"></mfooter>
    </div>
</template>

<script>
    import TopBar from '@/components/TopBar'
    import Card from '@/components/Card'
    import Mfooter from '@/components/Mfooter'
    import {Util} from '@/js/Util'
    import {AlertModule} from 'vux'
    import {Config} from '@/js/Config'
    export default {
        components: {
            TopBar,
            Card,
            Mfooter,
            AlertModule
        },
        mounted() {
            // 微信登录
            this.loginWechat(Util.getUrlParam('code'));
            Util.setFooterClass(this);
        },
        data() {
            return {
                chooseCount: 0,
                selectedIds: [],
                list: [],
                footer: {
                    type: 'download',
                    isDefault: false,
                    isDetail: false,
                    isDownload: false
                },
                download: {
                    query: [],
                    action: 'video'
                }
            }
        },
        methods: {
            // 授权登录
            loginWechat(code) {
                let _self = this;
                // 判断是否有账号信息
                if (!sessionStorage.getItem('MeiJingKu_openid')) {
                    if (!code) {
                        location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + Config._appid + '&r' +
                                'edirect_uri=' + encodeURIComponent(location.protocol + '//' + location.hostname + '/web/#/MeiJingSuiPai/video/download?id=' + this.$route.query.id) + '&response_type=code&scope' +
                                '=snsapi_userinfo&state=1#wechat_redirect';
                    }
                }else {
                    this.getList();
                    return false;
                }
                this
                    .$vux
                    .loading
                    .show({text: 'Loading'});
                // 测试接口
                // this.$http.post('user/LoginByOpenid/v1?openid=1').then(response => {
                this.$http.post('user/LoginByCode/v1?code=' + code).then(response => {
                        this
                            .$vux
                            .loading
                            .hide();
                        let result = response.data;
                        if (!result.code) {
                            sessionStorage.setItem('MeiJingKu_openid', result.data.openid);
                        } else {
                            location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
                                            Config._appid + '&redirect_uri=' + encodeURIComponent(location.protocol + '//' + location.hostname + '/web/#/MeiJingSuiPai/video/download?id=' + _self.$route.query.id) + '&respon' +
                                            'se_type=code&scope=snsapi_userinfo&state=1#wechat_redirect';
                        }
                        this.getList();
                    }, response => {
                        Util.errorWarning(this);
                    });
            },
            getList() {
                this.$vux.loading.show({text: 'Loading'});
                let openid = sessionStorage.getItem('MeiJingKu_openid'),
                    id = this.$route.query.id;
                this.$http.get('team/TeamVideo/v1?teamId=' + id + '&openid=' + openid).then(response => {
                    this.$vux.loading.hide();
                    let result = response.data;
                    // 验证失败
                    if(result.code) {
                        this.$vux.toast.text(result.data, 'bottom');
                        return false;
                    }
                    sessionStorage.setItem('MeiJingKu_auth', result.data.auth);
                    for(let i in result.data.videos) {
                        let item = {
                            img: result.data.videos[i].screenShot,
                            title: result.data.videos[i].name,
                            id: result.data.videos[i].id,
                            date: result.data.videos[i].time,
                            link: result.data.videos[i].link
                        };
                        this.list.push(item);
                    }
                    console.log(result);
                }, response => {
                    Util.errorWarning(this);
                });
            },
            changeSelected(event) {
                // get selected elements number
                let self = event.currentTarget;
                if(!self.getAttribute('isSelected')) {
                    // add selected number
                    this.chooseCount++;
                    this.download.query.push(self.getAttribute('data-id'));
                    // console.table(this.selectedIds);
                }else {
                    this.chooseCount--;
                    // remove selected id
                    let index = this.download.query.indexOf(self.getAttribute('data-id'));
                    if (index > -1) {
                        this.download.query.splice(index, 1);
                    }
                    // console.table(this.selectedIds);
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    .Video-index {
        padding-top: 5rem;
    }

    .footer-default,
    .footer-detail {
        margin-bottom: 12rem !important;
    }

    .footer-download {
        margin-bottom: 15rem !important;
    }
</style>